<style lang="less" scoped>
  .box-panel {
    position: relative;
    min-height: 20vh;
  }

  .box-panel-header {
    padding: 15px 25px;
    border-bottom: 1px solid #eee;
    position: relative;
  }

  .b-p-h-title {
    line-height: 34px;
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    color: #333;
  }

  .box-panel-body {
    padding: 25px 24px;
  }
</style>
<template>
  <div class="box-panel">
    <div class="box-panel-header">
      <span class="b-p-h-title">{{item_title}}</span>
    </div>
    <div class="box-panel-body">
      <el-table stripe :data="formData" ref="theTable" :header-cell-style="{background:'#F5F7FA',color:'#606266'}"
        row-key="id" border :indent="20" :default-expand-all="isExpand" :tree-props="{children: 'children'}"
        style="width: 100%;min-width: 680px;">
        <el-table-column prop="title" label="菜单名称">
        </el-table-column>
        <el-table-column prop="key" label="菜单标识">
        </el-table-column>
        <el-table-column label="菜单图标">
          <template slot-scope="scope">
            <span :class="scope.row.icon" style="font-size: 18px;"></span>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="菜单排序">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="openEdit(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div id="Dialog">
      <div class="edit_D">
        <el-dialog title="编辑信息" :visible.sync="edit_Dialog" :width="dialogWidth">
          <el-form :model="edit_form_data">
            <el-form-item label="ID：" :label-width="dialogLabelWidth">
              <el-input v-model="edit_form_data.id" :disabled="true">
              </el-input>
            </el-form-item>
            <el-form-item label="* 菜单名称：" :label-width="dialogLabelWidth">
              <el-input v-model="edit_form_data.title" autocomplete="off" placeholder="菜单名称必填" clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="* 菜单图标：" :label-width="dialogLabelWidth">
              <div style="width: 60%;float: left;">
                <el-input v-model="edit_form_data.icon" autocomplete="off" placeholder="菜单图标必填" clearable>
                </el-input>
              </div>
              <div style="width: calc(40% - 5px);float: right;">
                <el-link style="margin-left:20px;" target="_blank" :underline="false" href="https://element.eleme.cn/#/zh-CN/component/icon">
                  选择图标
                  <i class="el-icon-view el-icon--right"></i>
                </el-link>
              </div>
            </el-form-item>
            <el-form-item label="* 排序：" :label-width="dialogLabelWidth">
              <el-input-number v-model="edit_form_data.sort" :min="0" :step="5">
              </el-input-number>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="offEdit">取 消</el-button>
            <el-button type="primary" @click="subEdit">提交编辑</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>

</template>

<script>
  import $R from "../../js/common/request";
  import $P from "../../js/common/public";
  export default {
    data() {
      return {
        item_title: this.$route.meta.item_title,
        isExpand: false,

        formData: [],

        dialogWidth: "560px",
        dialogLabelWidth: "120px",

        // 编辑对话框
        edit_Dialog: false,
        edit_form_data: {
          id: "",
          title: "",
          icon: "",
          sort: 0,
        },
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        $P.openLoad();
        let self = this;
        $R.Menu.menuList({
          success(res) {
            self.formData = res.tree;
            // 默认关闭列表
            self.collapseAll();
            setTimeout(function () {
              $P.closeLoad();
            }, "200");
          },
          error() {
            $P.closeLoad();
          }
        });
      },

      forArr(arr, isExpand) {
        arr.forEach(i => {
          this.$refs.theTable.toggleRowExpansion(i, isExpand)
          if (i.children) {
            this.forArr(i.children, isExpand)
          }
        })
      },
      // 展开列表
      expandAll() {
        this.forArr(this.formData, true)
      },
      // 关闭列表
      collapseAll() {
        this.forArr(this.formData, false)
      },
      // 打开编辑对话框
      openEdit(data) {
        let self = this;
        self.edit_form_data = { ...data };
        setTimeout(function () {
          self.edit_Dialog = true;
        }, "200");
      },
      // 关闭编辑框
      offEdit() {
        self = this;
        self.edit_Dialog = false;
        setTimeout(function () {
          self.edit_form_data = {
            id: "",
            title: "",
            icon: "",
            sort: 0,
          };
        }, "200");
      },
      // 提交修改
      subEdit() {
        self = this;
        if (!self.edit_form_data.title) {
          $P.Msg("请填写菜单名称", 4);
          return;
        }
        if (!self.edit_form_data.icon) {
          $P.Msg("请选择菜单图标", 4);
          return;
        }

        $P.openLoad();
        $R.Menu.menuModify({
          params: Object.assign({}, self.edit_form_data),
          success(res) {
            self.offEdit();
            self.init();
          },
          error() {
            $P.closeLoad();
          }
        });
      },
    },
    computed: {}
  };
</script>